<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ViTE博客管理后台</title>
    <meta name="description" content="ViTE博客管理后台">
    <meta name="keywords" content="ViTE博客管理后台">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link href="../plugins/quill/quill.snow.css" rel="stylesheet">
    <link href="../plugins/quill/quill.bubble.css" rel="stylesheet">
    <link href="../plugins/quill/quill.core.css" rel="stylesheet">
    <script src="../plugins/quill/quill.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>网站管理<small>首页</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>文章总量</span>
                        </div>
                        <div class="text item">
                            {{ totalArticles }}
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>用户总量</span>
                        </div>
                        <div class="text item">
                            {{ totalUsers }}
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 20px;">
                <el-col :span="12">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>最新文章</span>
                        </div>
                        <el-table :data="latestArticles" style="width: 100%">
                            <el-table-column property="title" label="标题"></el-table-column>
                            <el-table-column property="author" label="作者"></el-table-column>
                            <el-table-column property="publishDate" label="发布日期"></el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>最近注册用户</span>
                        </div>
                        <el-timeline>
                            <el-timeline-item
                                    v-for="(activity, index) in recentUsers"
                                    :key="index"
                                    :timestamp="activity.registerDate">
                                {{ activity.username }}
                            </el-timeline-item>
                        </el-timeline>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../plugins/quill/vue-quill-editor.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
            totalArticles: 0,
            totalUsers: 0,
            latestArticles: [],
            recentUsers: []
        },
        created() {
            this.fetchData();
        },
        methods: {
            fetchData() {
                axios.get("/admin/article/totalArticles").then((res)=>{
                    this.totalArticles = res.data.data;
                }).catch((error)=>{
                    if (error == "Error: Request failed with status code 403"){
                        this.$message.error("无操作权限");
                    }
                });
                axios.get("/admin/user/totalUsers").then((res)=>{
                    this.totalUsers = res.data.data;
                }).catch((error)=>{
                    if (error == "Error: Request failed with status code 403"){
                        this.$message.error("无操作权限");
                    }
                });
                axios.get("/admin/latestArticles").then((res)=>{
                    this.latestArticles = res.data.data;
                }).catch((error)=>{
                    if (error == "Error: Request failed with status code 403"){
                        this.$message.error("无操作权限");
                    }
                });
                axios.get("/admin/recentUsers").then((res)=>{
                    this.recentUsers = res.data.data;
                }).catch((error)=>{
                    if (error == "Error: Request failed with status code 403"){
                        this.$message.error("无操作权限");
                    }
                });
            }
        }
    });
    Vue.use(window.VueQuillEditor);
</script>
</html>
